<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>
  <META http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../static/plugins/element-ui/index.css">
</head>
<body>
<div id="app">
<h1>登录页面</h1>
  <input type="text" placeholder="用户名" id="username" v-model="username">
  <br>
  <input type="password" placeholder="用户名" id="password" v-model="password">
  <br>
  <el-button type="primary" @click="login()" style="margin-top: 5px;">登录</el-button>
</div>
</body>
<script src="../static/plugins/vue/vue.js"></script>
<script src="../static/plugins/element-ui/index.js"></script>
<script src="../static/plugins/axios/axios.min.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      username: "zhangsan" ,
      password: "123456"
    },
    created(){
    },
    mounted() {
    },
    methods: {
      login(){
          axios.post('/login', {
            username: this.username,
            password: this.password
          }).then((res) => {
            if (res.data.code === 200){
              // TODO 登录成功后再次跳转到首页
              window.top.location.href = '/' ; 
            } else {
              this.$message.error(res.data.msg);
            }
          });
      }
    }
  });
</script>
</html>